<template>
	<view class="container">
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="list_top">
				<view>
					<text>支付渠道名称：</text>
					<text>{{item.payChannelDesc}}</text>
				</view>
				<view style="color: #357CD4;">{{item.payChannelStatusDesc}}</view>
			</view>
			<view class="list_bottom">
				<view>
					<view>
						<text>应用场景：</text>
						<text>{{item.payType}}</text>
					</view>
					<view style="padding-top: 10rpx;">
						<text>申请状态：</text>
						<text>{{item.payChannelApplyStatusDesc}}</text>
					</view>
				</view>
				<view>
					<u-switch size="40" active-color="#357CD4" inactive-color="#999999" v-model="item.payChannelStatus==1?true:false" @change="checkedHandle(item.payChannelStatus,item.id)"></u-switch>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:[]
			}
		},
		mounted(){
			this.getList();
		},
		methods:{
			getList(){
				this.$u.offlineApi.payChannel().then(res => {
					if(res.code==0){
						this.list = res.data;
					}
				})
			},
			checkedHandle(status,id){
				this.$u.offlineApi.payChannelOn0rOff({
					id:id,
					status:status==1?2:1
				}).then(res=>{
					if(res.code==0){
						this.getList();
					}
				})
				
			}
		}
	}
</script>

<style scoped>
	.container{
		padding:30rpx;
	}
	.list{
		padding:30rpx;
		border-radius: 10rpx;
		box-shadow: 1px 1px 5px 1px #f2f2f2;
		margin-bottom: 30rpx;
	}
	.list_top{
		display: flex;
		justify-content: space-between;
	}
	.list_bottom{
		padding-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
</style>
